<style scoped>
.layout {
    border: 1px solid #d7dde4;
    background: #EEEEEE;
}

.layout-content {
    border-radius: 4px;
    /* background: #1AA094; */
}

.layout-content-main {
    height: 100%;
    background: #ffffff;
    overflow-y: auto;
}

.layout-menu {
    /* background: #1AA094;
    height: 100%; */
    overflow-y:auto;
}
.layout-footer{
    text-align: center;
    color: #324057;
    height: 40px;
    line-height: 40px;
    background-color: #f5f7f9;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
</style>
<template>
    <div class="layout">
        <Loading></Loading>
        <LayoutHead :toggleClick='toggleClick'></LayoutHead><!--系统头部-->
        <div class="layout-content">
            <Row>
                <i-col :span="spanLeft" class="layout-menu" :style="{height:clientHeight+'px'}">
                    <LayoutMenu :datalist='MenuList' :leftsize='spanLeft'></LayoutMenu><!--菜单-->
                </i-col>
                <i-col :span="spanRight" class="layout-content-icol" >                   
                    <LayoutBreadcrumb></LayoutBreadcrumb><!--面包屑-->
                    <div class="layout-content-main" :style="{height:clientHeight1+'px'}"><!--身体部分-->
                        <router-view></router-view>
                    </div>
                </i-col>
            </Row>
        </div>
        <div class="layout-footer">
        <LayoutFooter></LayoutFooter><!--系统脚部-->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo: this.GetlocaStorage("potUserinfo"),
            MenuList: [],//菜单列表
            spanLeft: 4,
            spanRight: 20,
            clientHeight: window.innerHeight - 94,//默认高度
            clientHeight1:window.innerHeight - 123,
        }
    },
    methods: {
        initMenu() {
            var userModel = new Object();
            var self = this;
            this.$http.get('Menu', { params: { UserId: this.userInfo.UserId, Account: this.userInfo.Account } }).then(function (res) {
                switch (res.data.status) {
                    case 0:
                        self.$Modal.info({ title: "提示信息", content: res.data.message, desc: false });
                        break;
                    case 1:
                        self.MenuList = res.data.model;
                        break;
                    case -1:
                        self.$Modal.warning({ title: "提示信息", content: "修改失败,请与管理员联系!" });
                        break;
                }
            });
        },
        toggleClick() {
            if (this.spanLeft === 4) {
                this.spanLeft = 2;
                this.spanRight = 22;
            } else {
                this.spanLeft = 4;
                this.spanRight = 20;
            }
        },

    },
    created: function () {
        this.initMenu();
    }
}
</script>